
<script setup lang="ts">
import { toRefs } from 'vue';
 import { useRouter } from 'vue-router';
 import { useOrderListStore } from '../../stores/orderList'
 import SearchCommodity from '../../components/SearchComps/SearchCommodity.vue';
const {collectionList} = toRefs(useOrderListStore())
 const router = useRouter()
</script>

<template>
    <div class="collection">
        <div class="collection-nar-bar">
            <van-nav-bar >
                <template #left>
                    <van-icon @click="router.go(-1)" name="arrow-left" size="25" color="#8b8c85" />
                </template>
                <template #title>
                    <span class=" text-lg text-gray-500 font-thin">我的收藏</span>
                </template>
                <template #right>
                    <span class=" text-base text-gray-600">编辑</span>

                </template>
            </van-nav-bar>

            <div class="collection-list px-2">
                <div class="flex w-full h-full flex-wrap justify-between">
                        <div class="w-44 mt-2" v-for="item in collectionList" :key="item.tradeItemId">
                            <SearchCommodity :list="item"></SearchCommodity>
                        </div>
                    </div>
            </div>

        </div>
    </div>
</template>

<style lang="scss" scoped>
.collection {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #f6f6f6;
    z-index: 2;
    overflow-y: auto;
}
</style>